import React from "react"
let { Provider, Consumer } = React.createContext({msg: "今晚我要大杀四方", color: "red"} )

function A(props) {
    return (
        <fieldset>
            <legend>A组件</legend>
            <h1>这是A组件</h1>
            <Provider value={{msg: "搞起来,搞起来", color: "yellow"}}>
                <B></B>
            </Provider>
        </fieldset>
    )
}
function B(props) {
    return (
        <fieldset>
            <legend>B组件</legend>
            <h1>这是B组件</h1>
            <C></C>
        </fieldset>
    )
}
function C(props) {
    return (
        <fieldset>
            <legend>C组件</legend>
            <h1>这是C组件</h1>
            <D></D>
        </fieldset>
    )
}
function D(props) {
    return (
        <fieldset>
            <legend>D组件</legend>
            <h1>这是D组件</h1>
            <E></E>
        </fieldset>
    )
}
function E(props) {
    return (
        <fieldset>
            <legend>E组件</legend>
            <h1>这是E组件</h1>
            <F></F>
        </fieldset>
    )
}
function F(props) {
    return (
        <fieldset>
            <legend>F组件</legend>
            <h1>这是F组件</h1>
            <Consumer>
                {p => {
                    return <h1 style={{color:p.color}}>{p.msg}</h1>
                   
                }}
            </Consumer>
        </fieldset>
    )
}
export default A
